<template>
  <div class="app-container">
    <el-descriptions class="margin-top margin-bottom" :column="2" border>
      <el-descriptions-item label-class-name="my-descriptions-label"><template slot="label"> 车辆油量
        </template>{{ detail.fuelCapacity }}/16</el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label"><template slot="label"> 公里数
        </template>{{ detail.vehicleMileage }}</el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label"><template slot="label"> 验车时间 </template>{{ new
        Date(detail.takeAlsoTime) | parseTime }}</el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label"><template slot="label"> 车辆随车物品
        </template>{{ detail.accessoryItems }}</el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label" span="2"><template slot="label"> 其他描述
        </template>{{ detail.remark }}</el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label" span="2">
        <template slot="label"> 车身照片 </template>
        <template v-for="item in detail.bodyImage">
          <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image"
            fit="contain"></el-image>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label" span="2">
        <template slot="label"> 车辆划痕 </template>
        <template v-for="item in detail.scratchImage">
          <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image"
            fit="contain"></el-image>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label" span="2">
        <template slot="label"> 内饰照片 </template>
        <template v-for="item in detail.interiorImage">
          <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image"
            fit="contain"></el-image>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label" span="2">
        <template slot="label"> 仪表盘 </template>
        <template v-for="item in detail.panelImage">
          <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image"
            fit="contain"></el-image>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label" span="2">
        <template slot="label"> 验车视频</template>
        <!-- <template v-for="item in detail.carInspection.videoUrls"> -->
        <div style="width: 320px;height: 180px;" v-if="detail.videoUrls != null && detail.videoUrls.length > 0">
          <video-player class="video-player vjs-custom-skin" ref="videoPlayer1" :playsinline="true"
            :options="playerOptions">
          </video-player>
        </div>

        <!-- </template> -->
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-descriptions-label" span="2">
        <template slot="label"> 客户签名 </template>
        <template v-for="item in detail.signImage">
          <el-image :key="item" :src="item | mmvImageUrl" :preview-src-list="[$mmvImageUrl(item)]" class="mmv-image"
            fit="contain"></el-image>
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <el-row :gutter="15">
      <el-col :span="24" v-if="type == 2">
        <el-table :data="detail.cost">
          <el-table-column label="扣款原因" prop="deductionsFor"></el-table-column>
          <el-table-column label="扣款金额" prop="deductionsAmount"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import {deliveryInfo} from "@/api/charteredBus/detail";
export default {
  components: {
    videoPlayer
  },
  props: ['orderNo', 'type'],
  data() {
    return {
      showdatail: false,
      nowId: null,
      detail: {},
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false,  // 如果为true,浏览器准备好时开始回放
        muted: false,     // 默认情况下将会消除任何音频。
        loop: false,      // 是否视频一结束就重新开始。
        preload: 'auto',  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9',  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false,  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",  // 类型
          src: ''             // url地址
        }],
        poster: '',  // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,           // 当前时间和持续时间的分隔符
          durationDisplay: true,       // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true       // 是否显示全屏按钮
        }
      },
    };
  },
  mounted() {
    console.log('交车验车单');
    this.getData();
  },
  methods: {
    getData() {
      // if (this.type == 1) {
        deliveryInfo(this.orderNo, this.type).then(response => {
          this.detail = response.data;
          if (this.detail.videoUrls != null && this.detail.videoUrls.length > 0) {//存在交车验车视频
            this.playerOptions['sources'][0]['src'] = process.env.VUE_APP_BASE_IMAGE_URL + this.detail.videoUrls[0];
          }

        });
      // } else {
      //   deliveryInfo(this.orderNo).then(response => {
      //     this.detail = response.data;
      //     if (this.detail.videoUrls != null && this.detail.videoUrls.length > 0) {//存在还车验车视频
      //       this.playerOptions['sources'][0]['src'] = process.env.VUE_APP_BASE_IMAGE_URL + this.detail.videoUrls[0];
      //     }
      //   });
      // }
    },
    handleDetail(scope) {
      this.nowId = scope.row.id;
      this.showdatail = true;
    },
  },
}
</script>

<style>
.mmv-image {
  margin-left: 15px
}

.my-descriptions-label {
  width: 150px !important;
  text-align: center !important;
}
</style>
